医療機器メーカー ダイヤモンドバー 製品紹介サイト

依頼内容

医科・歯科治療機器を取り扱う医療機器メーカーのマニー株式会社様より、ダイヤバーの製品紹介サイト制作をご依頼いただきました。

ダイヤバーは、虫歯の除去や詰め物・被せ物のための歯の形成などに用いられる、歯科治療に欠かせない器具です。

マニー株式会社様では、粒径・形状・サイズなどの違いにより製品ラインナップが多岐にわたり、歯科医師や販売代理店が用途に応じた製品をスムーズに探せる仕組みを​ご希望いただきました。
お打ち合わせを数回行い、下記の構成・機能を導入することで、製品理解と発注導線を両立したサイトとする方針を決定しました。

・多数の製品を目的別に検索できる機能
・粒径／形状／用途／最大径／作業長など、複数条件での絞り込み機能
・選択した製品をリスト化し、代理店への発注に利用できるPDF出力機能
・日本語版と海外向け英語版の2言語展開
・英語版での海外代理店検索機能
・使用品番ランキングの表示、カタログダウンロードの提供

また、歯科医師から商社担当者まで幅広い年齢層のユーザーが利用することを踏まえ、直感的で操作しやすいUI設計に加え、今後の製品追加やランキング更新を社内で容易に運用できる仕組みも検討しました。

データ分析〜方針検討

まずマニー株式会社様の既存カタログや製品分類を精査し、実際の利用シーンを想定した情報設計を行いました。

「治療目的から探す」ケースと「製品仕様から探す」ケースの両方を想定し、検索軸の優先順位と導線設計を整理しました。
ご相談の結果、以下を組み合わせることで、さまざまな条件から目的の製品に迷わず到達できる構造を採用しました。

・治療用途を起点とした導線
・仕様にもとづく詳細な絞り込み
・視覚的に理解しやすいアイコン

さらに、検索結果からPDFリストを生成できる機能を設計し、「探す→まとめる→発注準備」というフローをサイト上で完結できる体験を目指しました。
運用面では、製品情報・ランキング・代理店情報をWordPressから更新できるようにし、継続的な拡張とメンテナンス負荷の軽減も考慮しました。

ラフ作成〜トンマナ設計

クライアント様側ですでにブランドデザインガイドラインが存在していたため、ガイドラインに準拠した案と、医療機器メーカーに適したクリーンなトーン＆マナーを意識した案の複数パターンで、ラフを制作しました。

A案
・既存のブランドデザインガイドラインのルールとトーンを踏襲し、ブランドを前面に押し出す案
・信頼性・堅実性のある雰囲気と、既存コーポレートサイト・商品・カタログ等との統一感を重視

B案
・よりクリーンな空気感・先進性を重視した案
・清潔感や未来的な空気感を強調し、既存ページとの差別化を図る

C案
・ブランドらしさを保ちつつ、新たな要素を加えた案
・A案の「信頼性・堅実性」とB案の「未来的な空気感」を融合

上記の案を比較検討いただいた結果、B案をベースにデザインを進めることになりました。

デザイン作成

コーポレートカラーの黄色と、ブランドデザインガイドラインに定めるブルーを基調に、グラデーションをメインビジュアルへ取り入れることで、既存の制作物とは異なる新しさや未来感を表現しました。

カラーの印象を活かしながら、統一感のあるデザインに仕上げています。

検索UIではボタンの操作性に配慮し、選択中・未選択の状態差を視覚的に明確化しました。

また、Webサイトの操作に不慣れな方にも配慮し、読みやすい文字サイズに設計しました。
さらに、イラストアイコンを交えた説明文を掲載し、情報が伝わりやすい構成にしています。イラストアイコンにはGIFアニメーションで動きを加え、単調な印象を避けました。

サイト全体を通して、近未来的な世界観の演出と押下しやすさを両立するため、ニューモーフィズム風のデザインを採用しています。

英語版対応

英語版のデザインもあわせて対応しました。
日本語版と英語版で一部仕様や内容が変わるため、印象を保ちながらデザインを調整しています。

実装

本サイトは、クライアント様が長期的に運用しやすいことを前提に、CMS構築とフロントエンド実装を一体で設計しました。

ダイヤバーは製品数が多く、粒径・形状・用途・サイズなど複数の属性で横断的に検索されます。そのため、WordPress上で製品情報をわかりやすく整理・管理できる仕組みを構築しました。各属性データを検索機能と連動させ、管理画面で登録・更新した内容がサイトの絞り込み表示に即時反映される構成としています。

フロントエンドでは、複数条件検索でもわかりやすく操作できるよう設計し、専門性の高い製品情報でも直感的に扱える操作性を重視しました。現状の発注フロー（代理店を介し、PDFなどで実施）に沿って、検索結果からPDFリストを生成できる機能も実装しています。これにより、ユーザーの「探す → まとめる → 発注準備（PDF出力）」の実務フローをサイト上で完結できる構成としました。

ランキング更新、製品追加、代理店情報の管理もCMS上で完結できるようにし、公開後の運用負担を最小限に抑えています。日本語版と英語版は共通構造で管理できるため、多言語展開においても更新効率に配慮しました。

コーディングでは、幅広いユーザー層を想定した視認性と操作性を重視し、デバイス環境に左右されにくい安定した表示と拡張性のある構成を採用しました。将来的な機能追加にも柔軟に対応できる実装としています。